/**
 * Created by zhaoxk on 2016/10/27.
 */
import React from 'react';
export default class CateBar extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            items: this.props.items || [],
            cur: this.props.cur || 0
        };
    }

    componentWillReceiveProps (prop) {
        this.setState({
            cur: prop.cur,
            items: prop.items || []
        });
    }

    changeCate (id, index) {
        if (index !== this.state.cur) {
            if (typeof this.props.changeCate === 'function') {
                this.props.changeCate(id, index);
            }
        }
    }

    renderItems (items) {
        if (items.length > 0) {
            const cur = this.state.cur,
                _items = items.map((item, i) => (
                    <li
                        key={item.id}
                        id={item.id}
                        className={(i === cur) ? 'on' : ''}
                        onClick={this.changeCate.bind(this, item.id, i)}
                    >
                        {item.label}
                    </li>
                ));
            return (
                <div>
                    <h2 className="barTitle">病例分类</h2>
                    <ul id="_cateBar">{_items}</ul>
                </div>
            );
        }
    }

    render () {
        return this.renderItems(this.state.items);
    }
}
